<template>
  <div class="mine">
    <div class="mine-head">
      <img class="mine-head-img" src="./../../../assets/images/touxaing@2x.png"/>
      <div class="mine-head-title"><span>您好，</span>{{user.name}}</div>
    </div>
    <van-cell-group  class="mine-form">
      <van-cell title="姓名" :value="user.name" />
      <van-cell title="账号" :value="user.account" />
      <van-cell title="商家编号" :value="user.businessCode" />
      <van-cell title="联系邮箱" :value="user.email" />
      <van-cell title="注册时间" :value="user.createTime" />
      <van-cell title="账户状态" :value="user.accountStatus" :class = " { 'normal': user.accountStatus === '正常','check': user.accountStatus === '待审核','refuse': user.accountStatus === '拒绝' } "/>
    </van-cell-group>
    <div class="mine-foot">
      <van-button type="primary" class="foot-btn" @click="logout()">退出登录</van-button>
    </div>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
export default {
  name: 'sun-insurance-mine',
  data () {
    return {
      // user: []
    }
  },
  computed: {
    user: {
      get () {
        return this.$store.state.permission.user
      },
      set (value) {
        this.$store.commit('SET_USER', value)
      }
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      // const userInfo = this.user
      switch (this.user.accountStatus) {
        case 0:
          this.user.accountStatus = '待审核'
          break
        case 1:
          this.user.accountStatus = '正常'
          break
        case 2:
          this.user.accountStatus = '拒绝'
          break
      }
      this.user = JSON.parse(JSON.stringify(this.user))
    },
    logout () {
      this.$dialog.confirm({
        title: '提示',
        message: '确定要退出登录么？'
      }).then(() => {
        if (localStorage.getItem('check') === 'false') {
          this.$store.commit('updateUsername', '')
          this.$store.commit('updatePassword', '')
          localStorage.removeItem('user')
          localStorage.removeItem('loginInfo')
          localStorage.removeItem('check')
        }
        this.$router.push({name: 'login'})
      }).catch(() => {
        // on cancel
      })
    }
  }
}
</script>

<style lang="stylus">
.van-dialog{
  font-size 32px
  max-width 80%
  width 50%
}
.van-dialog__message--has-title{
  font-size 32px
}
.van-dialog__confirm{
  font-size 32px
}
.van-dialog__cancel{
  font-size 32px
}
.mine{
  .mine-form{
    .van-cell{
      position relative
      line-height normal
    }
    .van-cell__title{
      width:210px;
      font-size:42px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      text-align left
      position absolute
      top 50%
      transform: translate(0, -50%)
    }
    .van-cell__value{
      width:auto;
      min-width 180px
      font-size:42px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
      position absolute
      top 50%
      right 12px
      transform: translate(0, -50%)
    }
    .normal{
      .van-cell__value{
        color #4bc960 !important
      }
    }
    .refuse{
      .van-cell__value{
        color #ff7676 !important
      }
    }
    .check{
      .van-cell__value{
        color #ff9854 !important
      }
    }
  }
}
</style>

<style lang="stylus" scoped>
.mine{
  padding 20px 30px
  background-image url(../../../assets/images/beijing.png)
  background-size 100%
  background-repeat: no-repeat;
  .mine-head{
    min-height 300px
    text-align center
    margin-bottom 32px
    .mine-head-img{
      margin-top 24px
      width 210px
    }
    .mine-head-title{
      font-size 42px
      font-family PingFang-SC-Medium
      font-weight 500
      color #ffffff
      span{
        color #ff8c68
      }
    }
  }
  .mine-form{
    // display:table;
    width 100%
    background #ffffff
    border-radius 10px
    padding 8px 3px
    .van-cell{
      min-height 108px
      position relative
    }
    .van-cell__title{
      width:210px;
      font-size:42px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
    .van-cell__value{
      width:auto;
      min-height:42px;
      font-size:42px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
  }
  .mine-foot{
    margin-top 72px
    margin-bottom 30px
    .foot-btn{
      width:100%;
      height:120px;
      background:rgba(17,177,144,1);
      border-radius:10px;
      font-size 42px
    }
  }
}
</style>
